<template>
  <view class="course-detail-container">
    <view class="course-image" v-if="!isPlaying">
      <image :src="courseDetail.cover_image_url" mode />
      <view class="play">
        <image
          class="play-image"
          @click="playing"
          src="../../static/images/play@2x.png"
          mode
        />
        <text class="play-text">播放课程简介</text>
      </view>
    </view>
    <view v-else>
      <video :src="courseDetail.course_video_url"></video>
    </view>
    <view class="course-content" v-if="courseDetail">
      <view class="title-price">
        <text class="title">{{ courseDetail.title }}</text>
        <text class="price">￥{{ courseDetail.price }}.00</text>
      </view>
      <text class="introduce">{{ courseDetail.introduction }}</text>
      <view class="rate">
        <van-rate
          readonly
          :value="courseDetail.score"
          color="#fe8e38"
          size="15px"
          @change="onChange"
        />
        <text class="study_count">{{ courseDetail.study_count }}人在学习</text>
      </view>
      <view class="btn">
        <image
          class="study-btn"
          src="../../static/images/start_study@2x.png"
          @click="toPlayPage"
          mode
        />
        <button class="share" type="default" open-type="share">
          <image
            class="share-btn"
            src="../../static/images/share@2x.png"
            mode
          />
        </button>
      </view>
    </view>
    <view class="catelog">
      <van-tabs :active="active" bind:change="onChange">
        <van-tab title="目录">
          <view
            class="video-detail"
            v-for="(item, index) in videoDetail"
            :key="index"
            >{{ index + 1 }}.{{ item.name }}</view
          >
          <text v-if="!videoDetail">暂无课程视频哦，请联系客服添加~</text>
        </van-tab>
        <van-tab title="讲师介绍">
          <view class="lecture">
            <view class="lecturer">
              <view class="left">
                <van-image
                  class="img"
                  round
                  width="3rem"
                  height="3rem"
                  :src="lecturerDetail.avatar"
                />
                <text class="name-follow">
                  <text class="name">{{ lecturerDetail.name }}</text>
                  <text class="follow"
                    >关注人数：{{ lecturerDetail.follow_count }}</text
                  >
                </text>
              </view>
              <van-button
                round
                type="default"
                size="mini"
                :color="lecturerDetail.is_follow ? color : ''"
                @click="isFollow"
                >{{ lecturerDetail.is_follow ? "已关注" : "关注" }}</van-button
              >
            </view>
            <text class="introduction">{{ lecturerDetail.introduction }}</text>
          </view>
          <text style="color: #636363; font-size: 15px" v-if="!lecturerDetail"
            >暂无讲师简介哦~</text
          >
        </van-tab>
        <van-tab :title="`评价(${commentTotal})`">
          <view class="lecture" v-for="(item, index) in comments" :key="index">
            <view class="lecturer">
              <view class="left">
                <van-image
                  class="img"
                  round
                  width="3rem"
                  height="3rem"
                  :src="item.avatar"
                />
                <van-rate
                  class="rate-pf"
                  readonly
                  :value="item.score"
                  color="#fe8e38"
                  size="15px"
                  @change="onChange"
                />
                <text class="name-follow">
                  <text class="nickname">{{ item.nickname }}</text>
                  <text
                    class="follow"
                    style="display: block; margin-top: 20rpx"
                    >{{ item.content }}</text
                  >
                </text>
              </view>
              <view class="right">
                <text class="comment">{{ item.comment_time }}</text>
              </view>
            </view>
            <view class="introduction">
              <image
                @click="isLike(item)"
                :src="
                  item.is_like === 1
                    ? '../../static/images/like_normal@2x.png'
                    : '../../static/images/like_highlight@2x.png'
                "
                mode
              />
              <view
                class="border"
                style="border: 3rpx solid #f1f1f1; margin-top: 60rpx"
              ></view>
            </view>
          </view>
          <text
            style="color: #636363; font-size: 15px; padding: 38rpx"
            v-if="!comments"
            >暂无评论哦，请学习之后再评价~</text
          >
        </van-tab>
      </van-tabs>
    </view>
  </view>
</template>
<script>
import request from "@/utils/request.js";
export default {
  data() {
    return {
      isPlaying: false,
      course_id: null,
      courseDetail: {},
      videoDetail: [],
      lecturerDetail: {},
      comments: [],
      commentTotal: "",
      active: 0,
      color: "#abb2bb",
    };
  },
  onLoad(options) {
    console.log(options);
    this.course_id = options.id;
    this.getCourseDetailData();
  },
  onShow() {
    this.getCourseDetailData();
  },
  methods: {
    async getCourseDetailData() {
      const res = await request({ url: `course/${this.course_id}` });
      console.log(res, "res");
      if (res.data.status === 0) {
        this.courseDetail = res.data.message.course;
        this.videoDetail = res.data.message.videos;
        this.lecturerDetail = res.data.message.lecturer;
        this.comments = res.data.message.comments;
        this.commentTotal = res.data.message.commentTotal;
      }
    },
    playing() {
      this.isPlaying = true;
    },
    onShareAppMessage: function () {
      // 页面被用户分享时执行
      return {
        title: "基础课程",
      };
    },
    onChange(event) {
      wx.showToast({
        title: `切换到标签 ${event.detail.name}`,
        icon: "none",
      });
    },
    async isFollow() {
      if (this.lecturerDetail.is_follow) {
        //取消关注
        const res1 = await request({
          url: "/lecturer/unfollow",
          method: "POST",
          data: { lecturer_id: this.lecturerDetail.id },
        });
        if (res1.data.status === 0) {
          uni.showToast({
            title: res1.data.message,
            icon: "none",
          });
          this.lecturerDetail.is_follow = 0;
        }
      } else {
        // 关注
        const res = await request({
          url: "/lecturer/follow",
          method: "POST",
          data: { lecturer_id: this.lecturerDetail.id },
        });
        console.log(res);
        if (res.data.status === 0) {
          uni.showToast({
            title: res.data.message,
            icon: "none",
          });
          this.lecturerDetail.is_follow = 1;
        }
      }
    },
    async isLike(item) {
      // console.log(isLikeId, commentId);
      //   if (isLikeId === 1) {
      //点赞
      const res1 = await request({
        url: "comment/like",
        method: "POST",
        data: { comment_id: item.id, is_like: item.is_like },
      });

      if (res1.data.status === 0) {
        item.is_like = item.is_like === 1 ? 2 : 1;
        uni.showToast({
          title: item.is_like === 1 ? "取消点赞" : "点赞成功",
          icon: "none",
        });

        // this.lecturerDetail.is_follow = 0;
      }
      //   } else {
      //     // 取消点赞
      //     const res = await request({
      //       url: "comment/like",
      //       method: "POST",
      //       data: { comment_id: commentId, is_like: 1 },
      //     });
      //     console.log(res);
      //     if (res.data.status === 0) {
      //       uni.showToast({
      //         title: res.data.message,
      //         icon: "none",
      //       });
      //       isLikeId = 1;
      //     }
      //   }
    },
    toPlayPage() {
      uni.navigateTo({
        url: `/pages/play/index?id=${this.course_id}`,
      });
    },
  },
};
</script>
<style lang='less' scoped>
.course-detail-container {
  background-color: #efefef;
}
.course-image {
  position: relative;
  height: 430rpx;
}
image {
  height: 100%;
}
.play {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.play-image {
  width: 150rpx;
  height: 150rpx;
}
.play-text {
  color: #fff;
  font-size: 30rpx;
}
.course-content {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
}
.title-price {
  display: flex;
  justify-content: space-between;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
  font-size: 50rpx;
  .title {
    font-weight: 700;
  }
  .price {
    color: #ee3939;
  }
}
.introduce {
  font-size: 30rpx;
}
.rate {
  margin: 20rpx 0;
  color: #fe8e38;
  font-size: 30rpx;
  .study_count {
    margin-left: 20rpx;
  }
}
.btn {
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;
  /deep/ .study-btn {
    width: 570rpx;
    height: 100rpx;
    border-radius: 10rpx;
  }
  /deep/ .share.button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100rpx;
    background-color: #fff !important;
    // border: 1px solid #fff;
    // border: 0 !important;
  }
  .share-btn {
    width: 50rpx;
    height: 50rpx;
  }
}
.catelog {
  margin-top: 30rpx;
  background-color: #fff;
  .video-detail {
    padding: 30rpx;
    color: #abb2bb;
    font-size: 30rpx;
  }
}
.lecture {
  padding: 30rpx;
}
.lecturer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
  .left {
    position: relative;
    .img {
      vertical-align: middle;
    }
    .name-follow {
      position: absolute;
      left: 150rpx;
      top: 15rpx;
      width: 400rpx;
      .name {
        display: block;
      }
      .follow {
        font-size: 30rpx;
        color: #abb2bb;
      }
      .nickname {
        margin-bottom: 40rpx;
        font-weight: 700;
        font-size: 35rpx;
      }
    }
  }
  .right {
    .comment {
      //   margin-top: 25rpx;
      font-size: 30rpx;
      color: #abb2bb;
    }
  }
}
.rate-pf {
  position: absolute;
  left: 270rpx;
  top: 20rpx;
}
.introduction {
  color: #abb2bb;
  font-size: 30rpx;
  overflow: hidden;
  image {
    float: right;
    width: 50rpx;
    height: 50rpx;
  }
}
</style>